<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="test"></div>

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<!-- jsx转为js -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

<script type="text/babel">

    class Weather extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                isHot: true,
                wind: "微风"
            }; // 组件属性 state
            this.demo = this.demo.bind(this) // 为事件函数绑定实例
        }

        render() {
            return (
                    <h2 id="title" onClick={this.demo}>天气很{this.state.isHot ? "炎热" : "凉爽"}, {this.state.wind}</h2>
            )
        }

        demo() {
            // state 不可直接修改，要借助一个内置api，否则不会更新页面信息
            let hot = this.state.isHot;

            // 更改之后，还会在调用一次render
            this.setState({isHot: !hot}) // 里面的参数进行合并，不是替换
        }
    }

    ReactDOM.render(<Weather/>, document.getElementById("test"))

</script>
</body>
</html>